<template>
  <div class="container">
    <div class="header">校园租赁平台</div>
    <a-form :model="formState" class="login-form" @finish="onFinish" @finishFailed="onFinishFailed">
      <a-form-item :rules="[{ required: true, message: '请输入用户名' }]" name="username">
        <a-input v-model:value="formState.username" placeholder="请输入用户名" size="large">
          <template #prefix>
            <UserOutlined class="site-form-item-icon" />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item :rules="[{ required: true, message: '请输入密码' }]" name="password">
        <a-input-password
          v-model:value="formState.password"
          autocomplete="off"
          placeholder="请输入密码"
          size="large"
        >
          <template #prefix>
            <LockOutlined class="site-form-item-icon" />
          </template>
        </a-input-password>
      </a-form-item>

      <a-form-item>
        <a-form-item name="remember" no-style>
          <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
        </a-form-item>
        <a class="login-form-forgot" @click="showModal">忘记密码？</a>
      </a-form-item>

      <a-form-item>
        <a-button :disabled="disabled" class="login-form-button" html-type="submit" type="primary">
          Log in
        </a-button>
      </a-form-item>
    </a-form>
    <div class="footer">
      2023&copy;校园租赁平台
      <!--<a href='mailto:glq05201218@163.com'>glq1218</a>-->
    </div>
  </div>
  <a-modal v-model:visible="visible" title="忘记密码" @ok="handleOk">
    <a-form :model="forgerReq">
      <a-form-item :rules="[{ required: true, message: '请输入忘记密码的用户名' }]" name="username">
        <a-input v-model:value="forgerReq.username" placeholder="请输入用户名" />
      </a-form-item>
      <a-form-item :rules="[{ required: true, message: '请输入手机号验证身份' }]" name="phone">
        <a-input v-model:value="forgerReq.phone" placeholder="请输入手机号" />
      </a-form-item>
      <a-form-item :rules="[{ required: true, message: '请输入新密码' }]" name="password">
        <a-input-password v-model:value="forgerReq.password" placeholder="请输入新密码" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts" setup>
import { forget, login } from '@/api/login'
import { setToken } from '@/utils/auth'
import router from '@/router'
import { computed, reactive, ref } from 'vue'
import { message } from 'ant-design-vue'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'

const userStore = useUserStore()
const { jwt_token, userInfo } = storeToRefs(userStore)

interface FormState {
  username: string
  password: string
  remember: boolean
}

const formState = reactive<FormState>({
  username: '',
  password: '',
  remember: false
})
const onFinish = (values: any) => {
  login(values).then((res) => {
    if (res.data.code === 200) {
      userInfo.value = res.data.data.loginUser
      message
        .success('登录成功', 1)
        .then(() => message.success('欢迎' + res.data.data.loginUser.nickname, 2))
      setToken(res.data.data.token)
      router.push('/')
      return
    }
    message.error(res.data.msg)
  })
}

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo)
}
const disabled = computed(() => {
  return !(formState.username && formState.password)
})
const visible = ref<boolean>(false)

const showModal = () => {
  visible.value = true
}

const handleOk = () => {
  if (forgerReq.value.phone === '' || forgerReq.value.password === '') {
    message.warn('请输入完整内容')
    return
  }
  forget(forgerReq.value).then((res) => {
    message.info(res.data.msg)
    if (res.data.code === 200) {
      visible.value = false
    }
  })
}

const forgerReq = ref<{ username: string; phone: string; password: string }>({
  username: '',
  phone: '',
  password: ''
})
</script>

<style lang="less" scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: #053350;

  .header {
    font-size: 50px;
    color: #ffffff;
    letter-spacing: 10px;
    text-align: center;
  }

  .footer {
    width: 100%;
    background-color: #f2f2f2;
    height: 8vmin;
    text-align: center;
    line-height: 8vmin;
  }

  .login-form {
    width: 30vmax;
    background-color: #fff;
    padding-inline: 40px;
    padding-block: 60px 20px;
    border-radius: 5%;
    min-width: 300px;
    box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;

    .site-form-item-icon {
      color: #c1c1c1;
    }

    .login-form-forgot {
      float: right;
    }

    .login-form-button {
      width: 100%;
    }
  }
}
</style>